<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css"
    />
  </head>
  <body>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
    <style>
      .list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
      .list .el-image {
        width: 240px;
        margin: 10px;
      }
      ::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      ::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #909399;
      }
      ::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 5px;
        background: #ededed;
      }
      .el-image-viewer__close {
        background-color: unset;
      }
    </style>
    <div id="app">
      <template>
        <el-container>
          <el-main>
              <el-switch
                v-model="accordion"
                active-text="手风琴效果"
                inactive-text="默认效果"
                @change="changeSwitch"
              >
              </el-switch>
            <el-collapse v-model="activeNames" :accordion="accordion">
              <div v-for="(item,index) in list" :key="`key_${index}`">
                <el-collapse-item :title="item.name" :name="index" v-if="item">
                  <div class="list">
                    <el-image
                      :preview-src-list="item.urls"
                      v-for="url in item.urls"
                      :key="`url_${url}`"
                      :src="url"
                    ></el-image>
                  </div>
                </el-collapse-item>
              </div>
            </el-collapse>
          </el-main>
        </el-container>
      </template>
    </div>
    <script>
      var Main = {
        data() {
          return {
            list: [],
            accordion: false,
            activeNames: [],
            baseUrl: "http://img.lijundong.cn/",
            arr: [
              { path: "banner/", type: "jpg" },
              { path: "banner/cover_", type: "jpg" },
              { path: "banner-plain/", type: "jpg" },
              { path: "expression/", type: "webp" },
            ],
          };
        },
        created() {
          this.intList();
        },
        methods: {
          intList() {
            this.arr.forEach((item, index) => {
              this.getImgList(item, index);
            });
          },
          async getImgList(item, index) {
            let i = 1;
            while (true) {
              try {
                const src = `${this.baseUrl + item.path + i}.${item.type}`;                
                axios.headers = {
                  ...axios.header,
                  Referer: "http://img.lijundong.cn",
                  "Accept-Ranges": "bytes",
                  "Access-Control-Allow-Origin": "*",
                  "Access-Control-Expose-Headers": "X-Log, X-Reqid",
                };
                const { status } = await axios.get(src,{
                  responseType: 'arraybuffer'
                });
                if (status !== 200) return;
                if (!this.list[index]) {
                  const obj = { name: item.path, urls: [] };
                  this.list[index] = obj;
                }
                this.list[index].urls.push(src);
                this.list = JSON.parse(JSON.stringify(this.list));
              } catch (err) {
                return false;
              }
              i++;
            }
          },
          changeSwitch(val) {
            this.activeNames = val
              ? this.activeNames[0] ?? ""
              : this.activeNames
              ? [this.activeNames]
              : [];
          },
        },
      };
      var Ctor = Vue.extend(Main);
      new Ctor().$mount("#app");
    </script>
  </body>
</html>
